<template>
	<view class="com-banner position-relative">
		<swiper class="com-banner-swiper" :style="{height: height + 'rpx'}"
		circular
		skip-hidden-item-layout
		autoplay
		:interval="3000"
		:duration="500"
		@change="handleCurrentChange">
			<swiper-item class="y-flex-1 position-relative" :style="{'border-radius': borderRadius + 'rpx'}" v-for="(item, index) in data" :key="index" @tap="handleTap(item)">
				<com-image lazy-load :border-radius="borderRadius" class="y-flex-1" mode="aspectFill" :src="item.cover"></com-image>
				<view class="position-absolute bottom-0 left-0 right-0 pt-20 pb-20 pl-30 pr-30 com-banner-text" v-if="titleShow">
					<text class="fs-24 fr-fff lines-1">{{item.title}}</text>
				</view>
			</swiper-item>
		</swiper>
		<view class="position-absolute right-20 bottom-30 y-flex y-row y-align-center" v-if="indicatorDots">
			<view class="com-banner-dot" :style="{
				'background-color': current == i ? indicatorActiveColor : (titleShow ? 'rgba(255,255,255,.5)' : 'rgba(0,0,0,0.5)'),
				'width': current == i ? '20rpx' : '10rpx'
			}" v-for="(dot, i) in data" :key="i"></view>
		</view>
	</view>
</template>

<script>
	export default {
		inject: ['navigate'],
		props: {
			data: {
				type: Array,
				default () {
					return new Array
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			height () {
				return this.options.height || 280
			},
			titleShow () {
				return this.options.titleShow || false
			},
			borderRadius () {
				return this.options.borderRadius
			},
			indicatorDots () {
				return this.options.enableIndicatorDots || false
			},
			indicatorActiveColor () {
				return this.options.indicatorActiveColor || this.options.themeColor || '#2ca2f9'
			}
		},
		data () {
			return {
				current: 0
			}
		},
		methods: {
			handleCurrentChange (e) {
				this.current = e.detail.current
			},
			handleTap (item) {
				this.navigate(item.url)
			}
		}
	}
</script>

<style>
	.com-banner-text {
		background-color: rgba(0, 0, 0, 0.5);
	}
	.com-banner-dot {
		height: 10rpx;
		margin-left: 10rpx;
	}
</style>